<template>
  <div>
    <span>{{Mes}}</span>
    <br>
    <span>{{count}}</span>
    <br>
    <span>{{arr}}</span>
    <hr>
    <span>{{usemainstore.count10}}</span>
  </div>
  <button @click="changeMes">修改数据</button>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useMainStore } from '../store'

const usemainstore = useMainStore()
const { count, Mes, arr } = storeToRefs(usemainstore)

console.log(count.value);

const changeMes = () => {
  //方式一：最简单的修改值的
  // usemainstore.count++;

  // 方式二：$patch这种方式进行多个状态修改,推荐使用这个进行修改，有性能提升
  // usemainstore.$patch({
  //   count: usemainstore.count + 1,
  //   Mes: 'HelloHzj',
  //   arr: [...usemainstore.arr, 4]
  // })

  //方式三：修改数组是要用到patch一个函数
  // usemainstore.$patch(state => {
    // state.count++
    // state.Mes = 'HelloHzj'
    // state.arr.push(4)

  // })
  // 方式五：逻辑多的情况下封装到actions里
  usemainstore.ChangeState(10)

}


</script>

<style scoped>

</style>